<template>
    <div id="mail-send">
        <div class="list">
            <div class="button-bar">
                <!-- <el-button class="btn" type="primary" size="mini" icon="el-icon-plus" @click="showPaperDialog=true" >新建经验</el-button> -->

                <el-button class="btn" type="danger" size="mini" icon="el-icon-delete" @click="onDelete">删除</el-button>
            </div>
            <div class="data">
                <el-table :data="paperList.data" ref="paperList" @select-all="onSelectAll" @select="onSelect">
                     <el-table-column type="selection"  align="center"  width="50" ></el-table-column>
                    <el-table-column type="index" label="序号" align="center" prop="index" width="60px" >
                        <div slot-scope="scope">
                            {{(paperList.pageNum - 1) * paperList.pageSize + 1 + scope.$index }}
                        </div>
                    </el-table-column>
                    <!-- <el-table-column label="标题" prop="title" align="center" width="100"></el-table-column>                    -->
                    <el-table-column label="发送时间" prop="createDate" align="center"></el-table-column>
                     <el-table-column label="更新时间" prop="updateDate" align="center"></el-table-column>
                    <el-table-column label="内容" prop="content" align="center" width=""></el-table-column>
                    <el-table-column label="是否删除"  align="center">
                        <slot slot-scope="scope">
                            {{scope.row.logicDelete == '0'?"否":"是"}}
                        </slot>
                    </el-table-column>
                    <el-table-column label="操作" prop="status" align="center" width="">
                        <slot slot-scope="scope">
                            <el-button size="mini" @click="look(scope.row)">查看</el-button>
                        </slot>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination layout="prev, pager, next"
                :current-page="paperList.pageNum"
                :page-size="paperList.pageSize"
                :total="paperList.total"
                @current-change="getExpericeList"
                @prev-click="getExpericeList"
                @next-click="getExpericeList"
            ></el-pagination>
        </div>
        <el-dialog class="tree-dialog" width="60%" title="新增经验交流" :visible.sync="showPaperDialog" append-to-body>
            <el-form :inline="true" :model="formdata" ref="filter">
                <el-form-item label="发件邮箱" prop="outbox">
                    <el-input v-model="formdata.outbox" placeholder="请输入发件邮箱" disabled></el-input>
                </el-form-item>
                <el-form-item label="图片上传">
                            <el-upload
                                class="upload-demo"
                                action="#"
                                multiple
                                :on-change="declareCardFileChange"
                                :auto-upload='false'
                                >
                              <el-button slot="trigger" size="mini" icon="el-icon-upload" type="primary"></el-button>
                            </el-upload>
                        </el-form-item>
                <el-form-item label="经验内容" prop="userName">
                    <el-input type="textarea" v-model="formdata.content" maxlength="200" autosize show-word-limit placeholder="最多可输入200字"></el-input>
                    <!-- <editor :content="formdata.content" :set-value="setAccessoryId"></editor> -->
                </el-form-item>
                 <el-form-item class="filter-button">
                    <el-button @click="showPaperDialog=false">取 消</el-button>
                    <el-button type="primary" @click="sendExprience">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog class="tree-dialog" width="60%" title="交流详情" :visible.sync="showlook" append-to-body>
            <div v-html="content"></div>
            <div class="imgbox">
                <img v-for="(item,index) in imgUrls" :key="index" :src="item" width="300px" @click="bigImg(item)" alt="加载失败">
            </div>
        </el-dialog>
        <el-dialog :visible.sync="dialogVisible" size="tiny" title="图片查看">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            dialogVisible:false,
            imgUrls:[],
            dialogImageUrl:'',
            paperList:{
                pageNum:1,//页码
                pageSize:25,
                total:5,//总共条数
                data:[
                    {}
                ]
            },
            // formData:{
            //     testPaper:{
            //         selectList:[],
            //         textareaList:[]
            //     },
            // },
            filter: {
                name:'',
                type: '',
            },
            options: [],
            showPaperDialog:false,
            formdata:{
                createDate:'',//收件地址
                outbox: JSON.parse(localStorage.getItem("user")).email,//发件地址
                updateDate:'',//邮件标题
                content:'',//邮件内容
                logicDelete:'',//抄送人
                userId:this.$store.state.user.id,
                files:''
            },
            content:'',
            showlook:false,
            paperFile:[],
            files:'',
            id:'',
            selected:[],
             
        }
    },
    watch:{
        showPaperDialog:{
            handler:function(newVal,oldVal){
                // console.log(newVal)
                if(!newVal){
                    this.formdata.inbox=''
                    // this.formdata.outbox=''
                    this.formdata.title=''
                    this.formdata.content=''
                    this.formdata.copyFor=[]
                }
            },
            deep:true
        }
    },
    methods:{
         bigImg(url){
            this.dialogVisible = true
            this.dialogImageUrl = url
        },
        setAccessoryId(val){
            this.formdata.content = val;
        },
        look(content){//查看邮件
            console.log(content)
            this.content=content.content
            let listData = content
            listData.imgUrls = listData.filePath.split(",");
            this.imgUrls = listData.imgUrls
                this.showlook=true
               

            // let listData = this.paperList.data
            //     for(var i = 0;i < listData.length;i++){
            //         if(listData[i].filePath){
            //             listData[i].imgUrls = listData[i].filePath.split(",");
            //         }
            //     }

        },
        getExpericeList(pageNum){//发送列表
            var submitData={
                current:typeof pageNum=='number' ? pageNum : this.paperList.pageNum,
                size:this.paperList.pageSize
            };
            
            this.$http.getExpericeList(submitData)
            .then((res)=>{
                
                var data=res.data.data
                this.$set(this.paperList,'pageNum',res.data.data.current);
                this.$set(this.paperList,'pageSize',res.data.data.size);
                this.$set(this.paperList,'total',res.data.data.total);
                this.$set(this.paperList,'data',res.data.data.records)

            }).catch((err)=>{
                console.log(err)
                this.$message.error('服务器出错,请稍后再试！！');
            })
        },

         //文案上传
        declareCardFileChange(file,fileList){
            this.paperFile=fileList
            console.log(this.paperFile)
        },

        sendExprience(){//新建邮件
            let _this = this
            let sendDate = {
                // userId:this.formdata.userId,
                // files:this.formdata.files,
                content:this.formdata.content

            }
             let list=new FormData();
            for(let key in sendDate){
                list.append(key,sendDate[key]);
            }
            if(_this.paperFile.length>0){
                for(let i in _this.paperFile){
                    list.append('files',_this.paperFile[i].raw);
                }
            }
            
            this.$http.sendNewExprience(list)
            .then(res=>{
                console.log(res.data)
                if(res.data.code==200){
                    this.$message({
                        message: '邮件发送成功',
                        type: 'success'
                    });
                    _this.showPaperDialog=false
                    _this.$refs.upload.clearFiles();
                }
                _this.getExpericeList()
            }).catch(err=>{
                console.log(err)
            })
        },

         //全选
        onSelectAll(selection){
            this.selected=selection
        },
        //选择
        onSelect(selection,row){
            this.selected=selection
        },

        // 删除
        onDelete(){
            if(this.selected.length===0){
                this.$message.warning("请选中要删除的经验交流!")
                return
            }
            let ids=this.selected.map((item)=>{
                return item.id
            });
            let id = ids.toString();
            let submitData={id:id}

             
            this.$http.deleteExprience(submitData)
            .then((res)=>{
                var data=res.data

                this.$message.success(data.message==='success' ? "删除成功!" :data.message)
                this.getExpericeList()//重新加载列表
            }).catch((err)=>{
                if(err.data && err.data.message){
                    
                }else{
                    window.message.close()
                    window.message= this.$message({
                        type:'error',
                        message:'程序出错,删除失败!',
                        showClose:true,
                    })
                }
                throw(err)
            })

        },
    },
    mounted(){
        // this.messageGetEmailSendList()
        // this.messageGetUserEmailList()
    },
    created(){
        this.getExpericeList();
    }
}
</script>
<style scoped lang="scss">
#mail-send{
    height: 100%;
    display: flex;
    flex-direction:column;
    padding: 15px;
}
.filter{
    margin: 10px;
    border: 1px solid #eee;
    border-radius: 10px;
    /deep/ .el-form{
       .el-form-item{
           flex-basis:30%;
            margin:5px;
            /deep/ .el-textarea {
                position: relative;
                display: inline-block;
                width: 560px;
                height: 200px;
                vertical-align: bottom;
                font-size: 14px;
                textarea{
                    height: 100%;
                }
            }
        }
        .el-input__inner{
	        height:35px;
	        line-height:35px;
        }
    }

}
/deep/.el-dialog .el-dialog__body{
    overflow: auto;
}
/deep/.tree-dialog{
    overflow: auto;
     /deep/.imgbox{
        margin-top: 20px;
        width: 100%;
            vertical-align: middle;
            img{
                display: inline-block;
                width: 300px;
                margin-right: 10px;
                cursor: pointer;
            }
    }
    /deep/ .el-form{
        height: 100%;
        overflow: auto;
        .el-form-item{
           flex-basis:30%;
            margin:5px;
            /deep/ .el-textarea {
                position: relative;
                display: inline-block;
                width: 560px;
                height: 200px;
                vertical-align: bottom;
                font-size: 14px;
                textarea{
                    height: 100%;
                }
            }
        }
    }
}
.filter-button{
    flex-basis:100% !important;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    width: 100%;
}
</style>


